<template>
  <!-- 用户管理 -->

  <div>
    <Breadcrumb></Breadcrumb>
    <!-- 卡片栏 -->
    <el-card class="box-card">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="用户名">
          <el-input placeholder="用户名" v-model="findUser.username"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleFindUsers">查询</el-button>
          <el-button type="primary" @click="handleAdd">添加</el-button>
          <el-button type="primary" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格 -->
    <el-table :data="userList" style="width: 100%" border>
      <el-table-column label="Id" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column label="用户名" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>Id: {{ scope.row.id }}</p>
            <p>用户名: {{ scope.row.username }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.username }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="备注" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.remarks }}</span>
        </template>
      </el-table-column>

      <el-table-column label="管理员" width="180">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isAdmina"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeIsAdmin(scope.row.id, scope.row.isAdmina)"
          >
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column label="是否启用" width="180">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isActived"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeIsActived(scope.row.id, scope.row.isActived)"
          >
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分栏 -->
    <div class="block">
      <el-pagination
        @size-change="handlePageSizeChange"
        @current-change="handlePageIndexChange"
        :current-page="pager.pageIndex"
        :page-size="pager.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pager.rowTotal"
      >
      </el-pagination>
    </div>

    <!-- 模态框  用与用户的添加与修改-->
    <el-dialog title="用户信息" :visible.sync="dialogFormVisible">
      <el-form :model="formData">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="formData.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="formData.remarks" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUserList,
  postAddUser,
  putUserById,
  deleteUserById,
  postUsersByUsername,
  putUserIsAdmina,
  putUserIsActived,
} from "../../api/users";
import Breadcrumb from  "../Breadcrumb.vue"

export default {
  components:{
    Breadcrumb,
  },
  mounted() {
    // 初始化用户信息
    this.fetchData(this.pager);
  },
  data() {
    return {
      userList: [],
      pager: {
        pageIndex: 1,
        pageSize: 5,
        rowTotal: 10,
      },
      dialogFormVisible: false,
      formData: {
        id: 0,
        username: "",
        password: "113",
        remarks: "",
      },
      formLabelWidth: "120px",
      currentIndex: 0,
      findUser: {
        username: "",
        password: "",
        remarks: "",
      },
    };
  },

  methods: {
    // 改变用户是否启用状态
    changeIsActived(id, isactived) {
      putUserIsActived(id, isactived)
        .then(({ data }) => {
          console.log(data);
          this.$message({
            message: data.msg,
            type: "success",
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 改变是否是管理员状态
    changeIsAdmin(id, isadmina) {
      putUserIsAdmina(id, isadmina)
        .then(({ data }) => {
          console.log(data);
          if (data.code === 1004) {
            this.$message.error(data.msg);
          } else if (data.code === 200) {
            this.$message({
              message: data.msg,
              type: "success",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 添加用户
    handleAdd() {
      this.dialogFormVisible = true;
      this.formData.id = 0;
      this.formData.username = "";
      this.formData.remarks = "";
    },
    // 编辑用户信息 （点击编辑按钮的时候保存当前行的数据,并保存下标）
    handleEdit(index, row) {
      // console.log(index, row);
      this.dialogFormVisible = true;
      this.formData.id = row.id;
      this.formData.username = row.username;
      this.formData.remarks = row.remarks;
      this.currentIndex = index;
      // console.log(this.formData);
    },
    // 删除用户(伪删除)
    handleDelete(index, row) {
      console.log(index, row);
      this.currentIndex = index;
      deleteUserById(row.id)
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
      this.userList.splice(this.currentIndex, 1);
    },
    // (添加用户信息与修改用户信息) 保存用户信息
    handleSave() {
      this.dialogFormVisible = false;
      // console.log(this.formData);
      // 用户id为0说明为添加操作
      if (this.formData.id === 0) {
        postAddUser(this.formData)
          .then(({ data }) => {
            this.userList.push(data.data);
          })
          .catch((err) => {
            console.log(err);
          });
      }
      // 否则进行更新操作
      else {
        console.log(this.formData);
        putUserById(this.formData.id, this.formData)
          .then(({ data }) => {
            this.userList.splice(this.currentIndex, 1, data.data);
            console.log(data);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    // 查找用户信息
    handleFindUsers() {
      // console.log(this.findUsername);
      postUsersByUsername(this.findUser)
        .then(({ data }) => {
          this.userList = data.data;
          this.pager.rowTotal = data.data.length;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 重置按钮
    handleReset() {
      this.findUser.username = "";
      this.fetchData(this.pager);
    },
    // 当用户改变条数时重新拉取数据
    handlePageSizeChange(val) {
      this.pager.pageSize = val;
      this.fetchData(this.pager);
    },
    // 当用户改变页数时重新拉取数据
    handlePageIndexChange(val) {
      this.pager.pageIndex = val;
      this.fetchData(this.pager);
    },
    // 分页功能
    fetchData(pager) {
      getUserList(pager)
        .then(({ data }) => {
          // 查询的数据
          this.userList = data.data.data;
          // 重新赋值，更改过的页数，每页条数,总页数
          this.pager = data.data.pager;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.el-pagination {
  display: flex;
  justify-content: space-between;
}
/* 使表格文字居中 */
::v-deep .el-table th,
::v-deep .el-table td {
  text-align: center !important;
}
</style>